

<template>
  <van-nav-bar  border   >
    <template #right>
      <van-popover v-model="showPopover" placement="bottom-end"  theme="dark" trigger="click" :actions="alist" @select="onSelect">
        <template #reference>
          <van-icon name="ellipsis" size="22" />
        </template>
      </van-popover>


    </template>
    <!-- 1. 什么都没有 2. 有返回默认 3. 有其他内容   -->
    <template #left>
      <slot>
        <div v-if='!noBack' class="back" @click="goback">
          <van-icon name="arrow-left" />
          <span>返回</span>
        </div>
      </slot>
    </template>
    <template #title>
      <div class="van-ellipsis"   >
        <span v-html="title"></span>
      </div>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        { text: '发布面试', icon: 'edit', path:'/ms/submit', name:'submit',  disabled: this.$route.name==='submit'  },
        { text: '搜索面试', icon: 'search', path:'/search' ,name:'search',  disabled: this.$route.name==='search' },
        { text: '登录注册', icon: 'user-o' , path:'/login',name:'login', disabled: this.$route.name==='login'  },
        { text: '首页', icon: 'home-o', path:'/ms/home', name:'home', disabled: this.$route.name==='home'  },
        { text: '扫码', icon: 'scan', path:'/scan' , name:'scan',},
        { text: '定位', icon: 'location-o', path:'/city' ,name:'city',},
      ],
    }
  },
  computed:{
    alist(){
      return this.actions.filter((item)=>item.name!==this.$route.name)
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    onSelect(action){
      console.log(action)
      this.$router.push(action.path)
    }
  },
  props: {
    title: [String, Number],
    noBack: Boolean,
  }
}
</script>


<style>
.back {
  color: #1989fa;
}

.myhead{
  position: fixed;
  width:100%;
  top:0;
  left:0;
}
</style>
